<!-- Content Wrapper. Contains page content -->
<!-- Content Wrapper. Contains page content -->
<div id="inner-container">
    <div class="row">
        <div class="col-md-3">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <i class="fa fa-bar-chart-o"></i> <h3 class="box-title"> {{'CONFIG.WIDGET.WIDGET'|translate}}</h3>
                    <div class="box-tools pull-right">
                        <i class="glyphicon glyphicon-plus toolbar-icon" ng-click="newWgt()" title="{{'COMMON.NEW'|translate}}"></i>&nbsp;&nbsp;
                        <i class="fa fa-copy toolbar-icon" ng-click="copyNode()" title="{{'COMMON.COPY'|translate}}"></i>&nbsp;&nbsp;
                        <i class="fa fa-edit toolbar-icon" ng-click="editNode()" title="{{'COMMON.EDIT'|translate}}"></i>&nbsp;&nbsp;
                        <i class="fa fa-trash-o toolbar-icon"  ng-click="deleteNode()" title="{{'COMMON.DELETE'|translate}}"></i>
                    </div>
                </div>
                <div class="box-body">
                    <input type="text" class="form-control" placeholder="Search" ng-model="keywords" ng-change="searchNode()">
                </div>
                <div class="panel-body">
                    <div id="widgetTreeID" js-tree="treeConfig" should-apply="applyModelChanges()" ng-model="treeData" tree="treeInstance"
                         tree-events-obj="treeEventsObj"></div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="box" ng-show="optFlag == 'new' || optFlag == 'edit'">
                <div class="box-header with-border">
                    <h3 class="box-title">{{widgetName}}</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12 form-horizontal">
                            <div class="row" ng-show="!customDs">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">{{'CONFIG.WIDGET.DATASET'|translate}}</label>
                                        <div class="col-sm-10">
                                            <ui-select ng-model="curWidget.datasetId">
                                                <ui-select-match>
                                                    {{$select.selected.name}}
                                                </ui-select-match>
                                                <ui-select-choices group-by="datasetGroup"
                                                                   repeat="w.id as w in datasetList | filter:{name : $select.search}">
                                                    {{w.name}}
                                                </ui-select-choices>
                                            </ui-select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" ng-show="customDs">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">{{'CONFIG.WIDGET.DATA_SOURCE'|translate}}</label>
                                        <div class="col-sm-10">
                                            <select class="form-control" ng-model="datasource"
                                                    ng-options="d as d.name+' ('+d.type+')' for d in datasourceList"></select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" ng-show="customDs">
                                <div class="col-md-12" ng-show="datasource.name"
                                     ng-include="datasource.type?('dashboard/getConfigView.do?type=' + datasource.type):''"></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-xs-12 col-sm-5 col-md-4 col-lg-2">
                                            <a class="btn btn-block btn-success" ng-click="customDs=!customDs">
                                                <i class="fa fa-fw {{customDs?'fa-table':'fa-edit'}}"></i>{{(customDs?'CONFIG.WIDGET.EXIST_QUERY':'CONFIG.WIDGET.NEW_QUERY')|translate}}
                                            </a>
                                        </div>
                                        <div class="col-xs-12 col-sm-5 col-md-3 col-lg-2">
                                            <button type="button" class="btn btn-block btn-success" ng-click="loadData()">
                                                {{'CONFIG.WIDGET.LOAD_DATA'|translate}}
                                            </button>
                                        </div>
                                        <div class="col-xs-12 col-sm-5 col-md-3 col-lg-2">
                                            <label>
                                                <input type="checkbox" ng-model="loadFromCache"> {{'CONFIG.WIDGET.FROM_CACHE'|translate}}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-repeat="alert in alerts">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <div uib-alert ng-class="'alert-' + (alert.type || 'warning')"
                                            close="alerts.splice($index, 1)">{{alert.msg}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr/>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group" ng-class="{'has-error': !(verify.widgetName || widgetName.length)}">
                                        <label class="col-sm-2 control-label">{{'CONFIG.WIDGET.WIDGET_NAME'|translate}}</label>
                                        <div class="col-sm-10">
                                            <input id="widgetName" ng-model="widgetName" class="form-control col-sm-10" placeholder="{{'CONFIG.WIDGET.CATEGORY'|translate}}/{{'CONFIG.WIDGET.WIDGET_NAME'|translate}}"/>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" ng-show="widgetData">
                                <div class="col-md-12">
                                    <div class="form-group" style="margin-bottom: 0px">
                                        <label class="col-sm-2 control-label">{{'CONFIG.WIDGET.WIDGET_TYPE'|translate}}</label>
                                        <div class="col-sm-10 chart-type">
                                            <ul class="list-inline" ng-model="curWidget.config.chart_type">
                                                <li ng-repeat="chart in chart_types" class="ng-scope nav-item"
                                                    ng-mouseover="showTooltip(chart, $event)"
                                                    ng-mouseout="hideTooltip(chart, $event)"
                                                    ng-click="changeChart(chart.value)">
                                                    <a class="ng-scope"
                                                       ng-class="[chart_types_status[chart.value]] && chart.value == curWidget.config.chart_type ? 'active':''">
                                                        <i class="chart-type-icon {{chart.class}} "
                                                           ng-class="{true:'',false:'disabled' }[chart_types_status[chart.value]]"></i>
                                                    </a>
                                                    <div class="chart-tip">
                                                        <em class="arrow"></em>
                                                        <span class="tooltip-title">{{chart.name}}</span>
                                                        <span><b>{{chart.row}}</b> &nbsp; {{'CONFIG.WIDGET.TIPS_ROW_DIM'|translate}} </span>
                                                        <span><b>{{chart.column}}</b> &nbsp; {{'CONFIG.WIDGET.TIPS_COLUMN_DIM'|translate}} </span>
                                                        <span><b>{{chart.measure}}</b> &nbsp; {{'CONFIG.WIDGET.TIPS_MEASURE'|translate}} </span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12" ng-include="getChartView()"></div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-danger pull-right">
                                                {{'CONFIG.WIDGET.CANCEL'|translate}}
                                            </button>
                                            <button type="submit" ng-click="saveWgt()"
                                                    class="btn btn-success pull-right"
                                                    style="margin-right: 5px">{{'CONFIG.WIDGET.SAVE'|translate}}
                                            </button>
                                            <button type="submit" ng-click="preview()"
                                                    class="btn btn-success pull-right"
                                                    style="margin-right: 5px">
                                                {{'CONFIG.WIDGET.PREVIEW'|translate}}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-{{previewDivWidth}}">
                                    <div id="preview_widget" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
                <div class="box-footer">
                </div>
                <!-- /.box-footer-->
                <div class="overlay" ng-show="loading">
                    <i class="fa fa-spinner fa-spin"></i>
                </div>
            </div>
        </div>
    </div>
</div>
</div>